<template>
	<view>
		<view style="margin-top: 20px;">
			<view class="top3">
				<input type="text" class="ren" placeholder="商户名 " v-model="nick">
				<input type="text" class="ren" placeholder="自己手机号 " v-model="phone">
				<input type="text" class="ren" placeholder="姓名（身份证姓名）" v-model="username">
				<input type="text" class="ren" placeholder="身份证号码 " v-model="userCid">
			</view>
			<view @click="pickCity()" class="top3">
				<input class="ren" disabled name="jiguan" type="text" placeholder="所在地" v-model="jiguan">
			</view>
			<view class="top3">
				<input class="ren" name="detail" type="text" placeholder="详细地址" v-model="detail">
				<input type="text" class="ren" placeholder="登录账号" v-model="loginName">
				<input type="password" class="ren1" placeholder="密码（打死不能忘）" v-model="loginPassword">
				<input type="password" class="ren1" placeholder="确认密码" style="border-top: hidden;border-bottom: hidden;" v-model="loginPassword1">
			</view>
			<view style="height: 60px;" class="top3">
				<input type="text" placeholder="验证码" v-model="code" class="codeClass">
				<button class="getyzm" @click="getCode()" :disabled="disabled" style="background-color: white;color: #888888;">{{captchaText}}</button>
			</view>
			<view class="input-box">
				<button class="loginBtn" @click="zhuce()" style="letter-spacing:10px;">注册</button>
			</view>
		</view>
		<!-- 城市弹出层 -->
		<view class="u-demo-area">
			<city-select v-model="value" @city-change="cityChange"></city-select>
		</view>
	</view>
</template>

<script>
	import citySelect from './ucitySelectPP.vue';
	import amap from '../../utils/amap-wx.130.js';		// 高德小程序插件  
	export default {
		components: {
			citySelect
		},
		data() {
			return {
				nick:'',					//商户名
				phone:'',					//手机号
				username:'',				//姓名（身份证姓名）
				userCid:'',					//身份证号码
				jiguan:'',					//所在地
				detail:'',					//详细地址
				loginName:'',				//登录账号
				loginPassword:'',			//密码（打死不能忘）
				loginPassword1:'',			//确认密码
				code:'',					//验证码
				disabled: false,			//倒计时过程中不能获取验证码
				captchaText: '获取验证码',
				key: '2f7f27be426ba68483764cd2e9f2c968', 	//高德地图key值
				
				value: false,
				value1: 1,
				value2: 1,
				value3: 1,
				options1: [],	//省份集合
				options2: [],	//城市集合
				options3: [],	//区县集合
			}
		},
		onLoad() {
			//使用高度插件定位
			this.amapPlugin = new amap.AMapWX({  	// 初始化高德插件
				key: this.key  
			}); 
			this.amapPlugin.getRegeo({
				success: (data) => {
					let sheng = data[0].regeocodeData.addressComponent.province;
					let shi = data[0].regeocodeData.addressComponent.city;
					let qu = data[0].regeocodeData.addressComponent.district;
					this.jiguan = sheng+"-"+shi+"-"+qu;
				}
			});
		},
		methods: {
			//展示地图下拉列表
			pickCity(){
				this.value = true;
			},
			//选择地址
			cityChange(e) {
				// console.log("省份："+e.province.label+" 城市："+e.city.label+" 区县："+e.area.label)
				let sheng = e.province.label;
				let shi = e.city.label;
				let qu = e.area.label;
				if(this.isNull(sheng)){
					sheng = ""
				}
				if(this.isNull(shi)){
					shi = ""
				}
				if(this.isNull(qu)){
					qu = ""
				}
				this.jiguan = sheng+"-"+shi+"-"+qu;
			},
			//注册联盟商家
			zhuce(){
				// console.log("商户名："+this.nick+" 手机号："+this.phone+" 姓名："+this.username+" 身份证号码："+this.userCid+" 所在地："+this.jiguan+" 详细地址："+this.detail+" 登录账号："+this.loginName+" 密码："+this.loginPassword+" 确认密码："+this.loginPassword1+" 验证码："+this.code)
				if(this.isNull(this.nick)){
					this.$u.toast('请输入商户名!');
					return;
				}
				if(this.isNull(this.phone)){
					this.$u.toast('请输入手机号!');
					return;
				}
				var reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if(!reg.test(this.phone)){
					this.$u.toast('请输入正确的手机号!');
					return;
				}
				if(this.isNull(this.username)){
					this.$u.toast('请输入您的真实姓名!');
					return;
				}
				if(this.isNull(this.userCid)){
					this.$u.toast('请输入您的身份证号码!');
					return;
				}
				if(this.isNull(this.jiguan)){
					this.$u.toast('请选择所在地!');
					return;
				}
				if(this.jiguan.indexOf("undefined") != -1){
					this.$u.toast('请将所在地选择完整!');
					return;
				}
				if(this.isNull(this.detail)){
					this.$u.toast('请输入详细地址!');
					return;
				}
				if(this.isNull(this.loginName)){
					this.$u.toast('请输入登录账号!');
					return;
				}
				if(this.isNull(this.loginPassword)){
					this.$u.toast('请输入登录密码!');
					return;
				}
				if(this.isNull(this.loginPassword1)){
					this.$u.toast('请确认密码!');
					return;
				}
				if(this.loginPassword.length < 6){
					this.$u.toast('密码长度不能小于六位!');
					return;
				}
				if(this.loginPassword != this.loginPassword1){
					this.$u.toast('输入的两次密码不相同，请重新输入!');
					return;
				}
				if(this.isNull(this.code)){
					this.$u.toast('请输入验证码!');
					return;
				}
				this.$http.post('/gzh/addxcx', {
					userid:uni.getStorageSync('usersId'),
					gzhName:this.nick,
					loginPassword:this.loginPassword,
					phone:this.phone,
					code:this.code,
					ucid:this.userCid,
					loginName:this.loginName,
					uname:this.username,
					place:this.jiguan,
					placeDetail:this.detail
				}).then(res => {
					console.log(res);
					if(res.data.code==200){
						this.$u.toast("注册成功")
						setTimeout(() => {
							uni.navigateTo({
								url:'../../pages/center/login'
							})
						},500)
					}else{
						this.$u.toast(res.data.msg)
					}
				})
				//注册  赵荣 18684532537
			},
			//获取验证码
			getCode(){
				var reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!reg.test(this.phone)) {
					this.$u.toast('抱歉，请输入正确的手机号!');
					return;
				}else{
					this.$http.get('/sms/createGzh',{
						phone:this.phone
					}).then(res => {
						if(res.data.code==404){
							this.$u.toast("手机号码不存在！");
							return
						}else if(res.data.code==500){
							this.$u.toast("该手机号已经被注册！");
							return
						}else{
							this.disabled = true;
							this.miao = 10;
							var that = this;
							const fn = setInterval(function() {
								that.captchaText = that.miao + 's后再次发送';
								that.miao = that.miao - 1;
								if (that.miao == 0) {
									that.disabled = false;
									that.captchaText = "获取验证码";
									clearInterval(fn);
								}
							}, 1000);
						}
					})
				}
			},
			//判断为空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top3 {
		width: 90%;
		margin-left: 5%;
	}
	.input-box{
		margin: 0rpx 20rpx;
		position: relative;
	}
	.input-box .icon{
		position: absolute;
		left: 10rpx;
		top: 20rpx;
		z-index: 100;
	}
	.input-box .input{
		background-color: white;
	}
	.loginBtn{
		width: 92%;
		margin-top: 30px;
		margin-bottom: 20px;
		background-color: #FF7900;
		color: white;
	}
	.ren{
		border: 0.5rpx #ecdede solid;
		background-color: white;
		height: 50px;
		padding-left: 40px;
		background-image: url(../../static/center/login_name.png);
		background-size: 20px;
		background-repeat: no-repeat;
		background-position-x: 10px;
		background-position-y: 15px;
	}
	.ren1{
		border: 0.5rpx #ecdede solid;
		background-color: white;
		height: 50px;
		padding-left: 40px;
		background-image: url(../../static/center/login_password.png);
		background-size: 20px;
		background-repeat: no-repeat;
		background-position-x: 10px;
		background-position-y: 15px;
	}
	.codeClass{
		border: 0.5rpx #ecdede solid;
		padding-left: 5rpx;
		float:left;
		width:49%;
		text-indent: 25px;
		background-color: white;
		padding: 20rpx 0 25rpx 0;
	}
</style>
